<template>
  <view class="shop_auth_page">
    <u-navbar autoBack fixed placeholder bgColor="#f3f3f3">
      <template #left>
        <view class="navBar">
          <u-icon name="arrow-left" color="#000" size="18"></u-icon>
          <text class="nav_title">上传资料</text>
        </view>
      </template>
    </u-navbar>
    <!--  步骤条  -->
    <view class="steps">
      <view class="step un_active">
        <u-badge numberType="limit" type="primary" value="1"></u-badge>
        <text>{{ shopData.id ? '编辑店铺' : '添加店铺' }}</text>
      </view>
      <u-icon name="arrow-right"></u-icon>
      <view class="step">
        <u-badge numberType="limit" type="primary" value="2"></u-badge>
        <text>资质认证</text>
      </view>
    </view>
    <view class="content">
      <view class="title">认证方式</view>
      <view class="auth_way">
        <view class="auth_way_item">营业执照</view>
      </view>
      <view class="card_box">
        <view class="card_title">上传营业执照<text>*</text></view>
        <view class="card_content">
          <view class="file_upload" @click="toExample">
            <template v-if="!licenceUrl">
              <image src="@/static/img/shop/licence_bg.png" mode="widthFix"></image>
              <view class="upload_text">
                <text>营业执照图片需保持内容清晰</text>
                <text>包含社会信用代码/注册号的资质</text>
              </view>
            </template>
            <template v-else>
              <image :src="licenceUrl" mode="widthFix"></image>
            </template>
          </view>
          <u-button type="primary" :disabled="!licenceUrl" shape="circle" text="提交审核" @click="qiyeEnter"></u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {qiyeEdit, qiyeEnter} from "@/api/shop";

export default {
  onLoad(option) {
    this.shopData = JSON.parse(option.data)
    this.licenceUrl = this.shopData.businessLicenseImg
  },
  data() {
    return {
      shopData: {},
      licenceUrl: ''
    }
  },
  methods: {
    toExample () {
      uni.navigateTo({
        url: '/pages/shop/licenceExample'
      })
    },
    qiyeEnter () {
      let fn = ''
      console.warn('2333333', this.shopData)
      if (this.shopData.id) {
        fn = qiyeEdit
      } else {
        fn = qiyeEnter
      }
      fn({
        ...this.shopData,
        businessLicenseImg: this.licenceUrl
      }).then(res => {
        if (res.code === 200) {
          uni.reLaunch({
            url: '/pages/shop/shop?activeTab=1'
          })
        } else {
          this.$modal.msgError(res.msg)
        }
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.shop_auth_page {
  width: 100vw;
  height: 100vh;
  background-color: #F3F3F3;

  .navBar {
    display: flex;
    align-items: center;

    .nav_title {
      font-size: 36rpx;
      font-weight: 400;
      color: #000000;
      margin-left: 8rpx;
    }
  }

  .steps {
    height: 64rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .step {
      display: flex;
      align-items: center;

      text {
        font-size: 24rpx;
        font-weight: 400;
        margin-left: 8rpx;
      }
    }

    .un_active {
      ::v-deep .u-badge {
        background: #999999;
      }

      text {
        color: #999999;
      }
    }

    ::v-deep .u-icon__icon {
      margin: 0 28rpx;
      font-size: 26rpx !important;
    }
  }
  .content {
    padding: 32rpx;
    .title {
      font-size: 32rpx;
      font-weight: 500;
    }
    .auth_way {
      display: flex;
      justify-content: flex-start;
      margin-top: 26rpx;
      .auth_way_item {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 160rpx;
        height: 64rpx;
        background: #E0ECEC;
        border: none;
        border-radius: 128rpx;

        font-size: 28rpx;
        font-weight: 400;
        color: #01756B;
      }
    }
    .card_box {
      background-color: #fff;
      display: flex;
      flex-direction: column;
      border-radius: 16rpx;
      padding: 32rpx;
      margin-top: 26rpx;
      .card_title {
        font-size: 32rpx;
        font-weight: 500;
        color: #333333;
        margin-bottom: 40rpx;
        & > text {
          font-size: 32rpx;
          font-weight: 400;
          color: #ED6F51;
          margin-left: 8rpx;
        }
      }
      .card_content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .file_upload {
          margin-bottom: 48rpx;
          position: relative;
          image {
            height: 380rpx;
          }
          .upload_text {
            pointer-events: none;
            width: 100%;
            position: absolute;
            bottom: 66rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text {
              font-size: 32rpx;
              font-weight: 500;
              color: #FFFFFF;
              margin-top: 5rpx;
            }
          }
        }
      }
    }
  }
}
</style>
